<template>
  <div class="print-page">
    <div class="print-actions" v-if="!isPrinted">
      <el-button type="primary" @click="handlePrint">打印处方</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
    
    <div class="prescription-wrapper" ref="printRef">
      <div class="prescription-header">
        <div class="hospital-name">医疗信息系统医院</div>
        <div class="prescription-title">门诊处方</div>
        <div class="prescription-id">处方编号: {{ prescriptionData.prescriptionId }}</div>
      </div>
      
      <div class="prescription-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">患者姓名:</span>
            <span class="value">{{ prescriptionData.patientName }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别:</span>
            <span class="value">{{ prescriptionData.patientInfo?.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄:</span>
            <span class="value">{{ prescriptionData.patientInfo?.age }}岁</span>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item">
            <span class="label">患者ID:</span>
            <span class="value">{{ prescriptionData.patientInfo?.patientId }}</span>
          </div>
          <div class="info-item">
            <span class="label">开方科室:</span>
            <span class="value">{{ prescriptionData.departmentName }}</span>
          </div>
          <div class="info-item">
            <span class="label">开方医生:</span>
            <span class="value">{{ prescriptionData.doctorName }}</span>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item">
            <span class="label">开方日期:</span>
            <span class="value">{{ formatDate(prescriptionData.createTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">处方类型:</span>
            <span class="value">{{ prescriptionData.type }}</span>
          </div>
          <div class="info-item">
            <span class="label">诊断:</span>
            <span class="value">{{ prescriptionData.diagnosis }}</span>
          </div>
        </div>
      </div>
      
      <div class="prescription-content">
        <div class="content-title">Rx</div>
        <table class="drug-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>药品名称</th>
              <th>规格</th>
              <th>单位</th>
              <th>用法</th>
              <th>剂量</th>
              <th>频次</th>
              <th>数量</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in prescriptionData.items" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.drugName }}</td>
              <td>{{ item.specification }}</td>
              <td>{{ item.unit }}</td>
              <td>{{ item.usage }}</td>
              <td>{{ item.dosage }}</td>
              <td>{{ item.frequency }}</td>
              <td>{{ item.quantity }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="prescription-footer">
        <div class="instructions" v-if="prescriptionData.instructions">
          <div class="label">处方说明:</div>
          <div class="value">{{ prescriptionData.instructions }}</div>
        </div>
        
        <div class="signature-area">
          <div class="signature-item">
            <div class="signature-label">医师签名:</div>
            <div class="signature-value">{{ prescriptionData.doctorName }}</div>
          </div>
          <div class="signature-item">
            <div class="signature-label">审核药师:</div>
            <div class="signature-value">{{ prescriptionData.auditInfo?.auditorName || '' }}</div>
          </div>
          <div class="signature-item">
            <div class="signature-label">调配药师:</div>
            <div class="signature-value">{{ prescriptionData.dispenseInfo?.dispenserName || '' }}</div>
          </div>
        </div>
        
        <div class="hospital-info">
          <div>医疗信息系统医院</div>
          <div>地址: 北京市海淀区中关村南大街5号</div>
          <div>电话: 010-12345678</div>
        </div>
        
        <div class="print-date">打印日期: {{ formatDate(new Date()) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { prescriptionAPI } from '@/utils/api'
import { formatDate } from '@/utils/date'
import { useWindowSize } from '@vueuse/core'

// 路由相关
const route = useRoute()
const router = useRouter()
const prescriptionId = ref(route.params.id)

// 打印相关
const printRef = ref(null)
const isPrinted = ref(false)
const { width } = useWindowSize()

// 处方数据
const prescriptionData = ref({})

// 获取处方详情
const getPrescriptionDetail = async () => {
  try {
    const res = await prescriptionAPI.getPrescription(prescriptionId.value)
    prescriptionData.value = res.data
  } catch (error) {
    console.error('获取处方详情失败', error)
    ElMessage.error('获取处方详情失败')
  }
}

// 处理打印
const handlePrint = () => {
  isPrinted.value = true
  setTimeout(() => {
    window.print()
    isPrinted.value = false
  }, 100)
}

// 返回
const goBack = () => {
  router.back()
}

// 页面加载时获取数据
onMounted(() => {
  getPrescriptionDetail()
  
  // 监听打印完成事件
  window.addEventListener('afterprint', () => {
    isPrinted.value = false
  })
})
</script>

<style scoped>
.print-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px;
}

.print-actions {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.prescription-wrapper {
  background-color: white;
  max-width: 210mm;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.prescription-header {
  text-align: center;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.hospital-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.prescription-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.prescription-id {
  font-size: 14px;
}

.prescription-info {
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
}

.info-item {
  flex: 1;
  display: flex;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.prescription-content {
  margin-bottom: 20px;
}

.content-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.drug-table {
  width: 100%;
  border-collapse: collapse;
}

.drug-table th, .drug-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.drug-table th {
  background-color: #f2f2f2;
}

.prescription-footer {
  margin-top: 30px;
}

.instructions {
  margin-bottom: 20px;
}

.signature-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.signature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signature-label {
  margin-bottom: 30px;
}

.hospital-info {
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}

.print-date {
  text-align: right;
  font-size: 12px;
}

@media print {
  .print-actions {
    display: none;
  }
  
  .prescription-wrapper {
    box-shadow: none;
    padding: 0;
  }
  
  .print-page {
    background-color: white;
    padding: 0;
  }
  
  @page {
    size: A4;
    margin: 10mm;
  }
}
</style> 